<template>
	<view class="detail-container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="back-icon">←</text>
				</view>
				<text class="navbar-title">备忘录详情</text>
				<view class="navbar-right">
					<!-- 空白占位，保持标题居中 -->
				</view>
			</view>
		</view>
		
		<!-- 详情卡片 -->
		<view class="detail-card">
			<!-- 标题区域 -->
			<view class="title-section">
				<view class="title-header">
					<text class="memo-title">{{ detail.title || '无标题' }}</text>
					<view v-if="detail.important" class="important-badge">
						<text class="star-icon">⭐</text>
					</view>
				</view>
				<view class="memo-meta">
					<text class="memo-time">{{ formatTime(detail.createTime || detail.addtime || detail.add_time || detail.created_at) }}</text>
					<view v-if="detail.category" class="category-tag">
						<text class="category-emoji">{{ getCategoryEmoji(detail.category) }}</text>
						<text class="category-name">{{ getCategoryName(detail.category) }}</text>
					</view>
				</view>
			</view>
			
			<!-- 内容区域 -->
			<scroll-view class="content-section" scroll-y="true" :show-scrollbar="false">
				<view class="memo-content" v-if="detail.content || html">
					<text class="content-text">{{ detail.content || html }}</text>
				</view>
				<view class="loading-content" v-else>
					<view class="loading-text">正在加载内容...</view>
					<view class="loading-dots">
						<view class="dot"></view>
						<view class="dot"></view>
						<view class="dot"></view>
					</view>
				</view>
				<!-- 底部缓冲区 -->
				<view class="content-bottom-space"></view>
			</scroll-view>
		</view>
		
		<!-- 底部操作按钮区 -->
		<view class="bottom-actions">
			<view class="action-button edit-button" @click="editMemo">
				<view class="button-icon">
					<text class="icon-text">✎</text>
				</view>
				<text class="button-text">编辑</text>
			</view>
			<view class="action-button delete-button" @click="deleteMemo">
				<view class="button-icon">
					<text class="icon-text">🗑</text>
				</view>
				<text class="button-text">删除</text>
			</view>
		</view>
		
		<!-- 删除确认弹窗 -->
		<view v-if="showDeleteModal" class="modal-overlay" @click="cancelDelete">
			<view class="delete-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">确认删除</text>
				</view>
				<view class="modal-body">
					<text class="modal-text">确定要删除这条备忘录吗？删除后无法恢复。</text>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel-btn" @click="cancelDelete">
						<text class="btn-text">取消</text>
					</view>
					<view class="modal-btn confirm-btn" @click="confirmDelete">
						<text class="btn-text">删除</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import localStorage from '@/utils/storage.js'

export default {
	data() {
		return {
			statusBarHeight: 0,
			detail: {},
			html: '',
			showDeleteModal: false,
			categories: [
				{ name: '普通', value: 'general', emoji: '📝' },
				{ name: '工作', value: 'work', emoji: '💼' },
				{ name: '生活', value: 'life', emoji: '🏠' },
				{ name: '学习', value: 'study', emoji: '📚' },
				{ name: '旅行', value: 'travel', emoji: '✈️' },
				{ name: '购物', value: 'shopping', emoji: '🛒' },
				{ name: '健康', value: 'health', emoji: '💪' },
				{ name: '娱乐', value: 'entertainment', emoji: '🎮' },
				{ name: '管理', value: 'admin', emoji: '🔧' }
			]
		}
	},
	onLoad(op) {
		this.getStatusBarHeight()
		this.id = op.id
		this.getInfo()
	},
	
	onShow() {
		// 每次页面显示时重新加载数据，确保编辑后的数据能同步
		if (this.id) {
			this.getInfo()
		}
	},
	methods: {
		// 获取适配的状态栏高度
		getStatusBarHeight() {
			const systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight || 0;
			
			// #ifdef MP-WEIXIN
			if (statusBarHeight === 0) {
				statusBarHeight = 25;
			}
			statusBarHeight = Math.max(statusBarHeight, 22);
			// #endif
			
			// #ifdef MP-ALIPAY
			if (statusBarHeight === 0) {
				statusBarHeight = 20;
			}
			// #endif
			
			// #ifdef H5
			statusBarHeight = 0;
			// #endif
			
			this.statusBarHeight = statusBarHeight;
		},
		
		getInfo() {
			if (!localStorage.isLoggedIn()) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					showCancel: false,
					success: () => {
						uni.navigateTo({
							url: '/pages/public/login'
						});
					}
				});
				return;
			}
			
			// 使用本地存储获取备忘录详情
			const result = localStorage.getMemoDetail(this.id);
			
			if (result.success) {
				this.detail = result.data;
				this.html = result.data.content;
			} else {
				uni.showToast({
					title: result.message || '备忘录不存在',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		
		formatTime(time) {
			if (!time) return '';
			const date = new Date(time);
			const now = new Date();
			const diff = now - date;
			
			// 如果是今天
			if (diff < 24 * 60 * 60 * 1000 && date.getDate() === now.getDate()) {
				if (diff < 60000) {
					return '刚刚';
				} else if (diff < 3600000) {
					return `${Math.floor(diff / 60000)}分钟前`;
				} else {
					return `${Math.floor(diff / 3600000)}小时前`;
				}
			}
			
			// 如果是昨天
			const yesterday = new Date(now);
			yesterday.setDate(yesterday.getDate() - 1);
			if (date.getDate() === yesterday.getDate() && 
				date.getMonth() === yesterday.getMonth() && 
				date.getFullYear() === yesterday.getFullYear()) {
				return `昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			}
			
			// 其他日期 - 简化显示
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			const hours = date.getHours().toString().padStart(2, '0');
			const minutes = date.getMinutes().toString().padStart(2, '0');
			
			// 如果是同一年，不显示年份
			if (date.getFullYear() === now.getFullYear()) {
				return `${month}-${day} ${hours}:${minutes}`;
			} else {
				return `${date.getFullYear()}-${month}-${day}`;
			}
		},
		
		getCategoryName(categoryValue) {
			const category = this.categories.find(cat => cat.value === categoryValue)
			return category ? category.name : '普通'
		},
		
		getCategoryEmoji(categoryValue) {
			const category = this.categories.find(cat => cat.value === categoryValue)
			return category ? category.emoji : '📝'
		},
		
		goBack() {
			uni.navigateBack()
		},
		
		editMemo() {
			// 跳转到编辑页面，传递备忘录ID
			uni.navigateTo({
				url: `/pages/subPack/index/edit?id=${this.id}`
			})
		},
		
		deleteMemo() {
			this.showDeleteModal = true
		},
		
		cancelDelete() {
			this.showDeleteModal = false
		},
		
		confirmDelete() {
			// 使用本地存储删除备忘录
			const result = localStorage.deleteMemo(this.id);
			
			if (result.success) {
				uni.showToast({
					title: result.message,
					icon: 'success'
				});
				
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} else {
				uni.showToast({
					title: result.message || '删除失败',
					icon: 'none'
				});
			}
			
			this.showDeleteModal = false;
		}
	}
}
</script> 
<style lang="scss" scoped>
.detail-container {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
}

.status-bar {
	background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
}

.custom-navbar {
	position: relative;
	z-index: 1;
	height: 88rpx;
	background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
	/* #ifdef MP-WEIXIN */
	padding: 20rpx 25rpx 16rpx 25rpx;
	/* #endif */
	/* #ifdef APP-PLUS */
	padding: 20rpx 30rpx;
	/* #endif */
	/* #ifdef H5 */
	padding: 20rpx 30rpx;
	/* #endif */
}

.navbar-content {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.navbar-left {
	width: 80rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.navbar-left:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.8);
}

.back-icon {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: bold;
	color: white;
}

.navbar-right {
	width: 80rpx;
	height: 60rpx;
}

.detail-card {
	position: relative;
	z-index: 1;
	flex: 1;
	margin: 15rpx 20rpx 0;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 25rpx 25rpx 0 0;
	box-shadow: 0 -8rpx 25rpx rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin-bottom: 120rpx; /* 为底部按钮留出空间 */
}

.title-section {
	padding: 30rpx 30rpx 25rpx;
	border-bottom: 1rpx solid #f0f0f0;
	flex-shrink: 0;
}

.title-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.memo-title {
	flex: 1;
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.3;
	word-break: break-all;
	margin-right: 15rpx;
	max-height: 80rpx;
	overflow: hidden;
}

.important-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #ff6b6b, #ff8e53);
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}

.star-icon {
	font-size: 28rpx;
}

.memo-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 10rpx;
}

.memo-time {
	font-size: 24rpx;
	color: #999;
}

.category-tag {
	display: flex;
	align-items: center;
	background: rgba(102, 126, 234, 0.08);
	border: 1px solid rgba(102, 126, 234, 0.2);
	padding: 6rpx 12rpx;
	border-radius: 15rpx;
}

.category-emoji {
	font-size: 22rpx;
	margin-right: 6rpx;
}

.category-name {
	font-size: 22rpx;
	color: #667eea;
}

.content-section {
	flex: 1;
	padding: 25rpx 30rpx;
}

.memo-content {
	padding-bottom: 40rpx;
}

.content-text {
	line-height: 1.7;
	font-size: 28rpx;
	color: #333;
	word-break: break-word;
	white-space: pre-wrap;
	display: block;
}

.content-bottom-space {
	height: 60rpx;
}

.loading-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 300rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 40rpx;
}

.loading-dots {
	display: flex;
}

.loading-dots {
	justify-content: center;
}

.dot {
	width: 12rpx;
	height: 12rpx;
	background: #a6c0fe;
	border-radius: 50%;
	margin: 0 5rpx;
	animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
	0%, 60%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	30% {
		transform: scale(1.5);
		opacity: 0.7;
	}
}

/* 小程序端特殊优化 */
/* #ifdef MP-WEIXIN */
.title-section {
	padding: 25rpx 25rpx 20rpx;
}

.content-text {
	font-size: 26rpx;
	line-height: 1.6;
}

.navbar-content {
	padding: 0 20rpx;
}

.detail-card {
	margin: 10rpx 15rpx 0;
}
/* #endif */

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.delete-modal {
	background: white;
	border-radius: 20rpx;
	margin: 0 60rpx;
	width: calc(100% - 120rpx);
	max-width: 600rpx;
	overflow: hidden;
}

.modal-header {
	padding: 40rpx;
	text-align: center;
	border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.modal-body {
	padding: 40rpx;
	text-align: center;
}

.modal-text {
	font-size: 30rpx;
	color: #666;
	line-height: 1.5;
}

.modal-footer {
	display: flex;
	border-top: 1rpx solid #f0f0f0;
}

.modal-btn {
	flex: 1;
	padding: 30rpx 0;
	text-align: center;
	transition: all 0.3s ease;
}

.modal-btn:active {
	background: #f5f5f5;
}

.cancel-btn {
	border-right: 1rpx solid #f0f0f0;
}

.btn-text {
	font-size: 32rpx;
}

.cancel-btn .btn-text {
	color: #666;
}

.confirm-btn .btn-text {
	color: #ff6b6b;
	font-weight: bold;
}

/* 底部操作按钮样式 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-top: 1rpx solid rgba(0, 0, 0, 0.08);
	padding: 15rpx 40rpx;
	padding-bottom: calc(15rpx + env(safe-area-inset-bottom));
	display: flex;
	gap: 30rpx;
	z-index: 100;
}

.action-button {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15rpx 0;
	border-radius: 16rpx;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.action-button:active {
	transform: scale(0.95);
}

.action-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.action-button:active::before {
	opacity: 1;
}

.edit-button {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.3);
}

.delete-button {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
	box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.3);
}

.button-icon {
	width: 50rpx;
	height: 50rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6rpx;
}

.icon-text {
	font-size: 24rpx;
	color: white;
	font-weight: bold;
}

.button-text {
	font-size: 22rpx;
	color: white;
	font-weight: 500;
}

/* 微信小程序适配 */
/* #ifdef MP-WEIXIN */
.bottom-actions {
	padding: 12rpx 30rpx;
	padding-bottom: 25rpx;
	gap: 25rpx;
}

.action-button {
	padding: 12rpx 0;
}

.button-icon {
	width: 45rpx;
	height: 45rpx;
	margin-bottom: 5rpx;
}

.icon-text {
	font-size: 22rpx;
}

.button-text {
	font-size: 20rpx;
}
/* #endif */
</style>